<template>
  <div class="listTemplate lan-loadmore-body bg-normal">
    <header class="t-header lan-header" v-if="!problemId" style="margin-bottom:3px;">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        详情
      </mu-appbar>
    </header>

    <section class="t-body lan-loadmore-content bg-normal" v-if="!loading">
      <!--无问题-->
      <div v-if="!obj.problemLevel && obj.checkResult === 0" class="noshadow">
        <section class="box">
          <p class="line-list textdot">
            项目名称：<span class="line-list-con">{{obj.orgName||'---'}}</span>
          </p>
          <p class="line-list">
            检查类型：<span class="line-list-con">{{obj.checkTypeName||'--- '}}</span>
          </p>
          <p class="line-list">
            所属区域：<span class="line-list-con">{{obj.areaName||'---'}}</span>
          </p>
          <p class="line-list textdot">
            检查部位：<span class="line-list-con">{{obj.checkParts||'---'}}</span>
          </p>
          <p class="line-list">
            检查结果：<span class="line-list-con">无问题</span>
          </p>
          <section class=" line-list img-box">
            现场照片：
            <div class="img-con" >
              <img class="img" v-for="(i,index) in handUrl(obj.scenePhotos)" :key="index" :preview="index" :src="i"/>
            </div>
          </section>
          <Preview :imgUrls="handUrl(obj.proScenePhotos)" :open="imgPreview" @close="imgPreview = false"></Preview>
          <p class="line-list">
            抄送人：<span v-for="(i,inidex) in obj.copyList " :key="inidex" class="line-list-con">{{i.userName}} </span>
          </p>
          <p class="line-list" :class="{'autograph':!!obj.checkSignature}">
            <span>检查人签名：</span>
            <!--{{obj.checkSignature}}-->
            <img v-if="obj.checkSignature" preview="0" class="imgs" :src="obj.checkSignature" alt="">
            <span v-else>暂无签名</span>
          </p>
        </section>
        <!--<noProblems v-bind:obj='obj'></noProblems>-->
      </div>

      <!--检查人-->
      <noProblems v-if="!(!obj.problemLevel && obj.checkResult === 0)" :obj='obj'></noProblems>
      <div v-for="(i,index) in listArray" :key="index">

        <!--整改责任人-->
        <rectification :rectDetailVo="i.rectDetailVo" :obj="obj" v-if="operType == 'rect'"
                       :operType="operType"></rectification>
        <rectification :rectDetailVo="i.rectDetailVo" :obj="obj" v-if="operType != 'rect' && i.rectDetailVo.rectStatus == 1 && (!!$route.query.cId || !!problemId || !!$route.query.info)" ></rectification>
        <!--任务 指派-->
        <assign :assignVoList="i.rectDetailVo.assignVoList"></assign>
        <!--复查人-->
        <review :reviewDetailVo="i.reviewDetailVo" :obj="obj" v-if="operType == 'review' && i.reviewDetailVo.reviewId" :operType="operType"></review>
        <review :reviewDetailVo="i.reviewDetailVo" :obj="obj" v-if="operType != 'review' && i.reviewDetailVo.reviewStatus == 1 && (!$route.query.id || !!problemId || !!$route.query.info)"></review>
        <!--:expand="true"-->
        <!--复查 指派-->
        <assign :assignVoList="i.reviewDetailVo.assignVoList"></assign>
        <!--问题闭合审核详情 复查里的问题闭合 --详情-->
        <!-- <closedAuditDetail :problemCloseApprovalVo="i.reviewDetailVo.problemCloseVo" v-if="i.reviewDetailVo.problemCloseVo"></closedAuditDetail> -->
        <!-- <closedAuditRD v-if="$route.query.id && i.reviewDetailVo.problemReviewApprovalId && i.reviewDetailVo.problemReviewApprovalId != $route.query.id && i.reviewDetailVo.reviewStatus == 1" :id="$route.query.id" :problemCloseApprovalVo="i.reviewDetailVo"  @refresh="init" :reviewId="i.reviewDetailVo.reviewId"></closedAuditRD> -->
        <!--问题闭合审核详情 复查里的问题闭合 --结果-->
        <closedAudit :problemCloseApprovalVo="i.reviewDetailVo.problemCloseApprovalVo" v-if="i.reviewDetailVo.reviewStatus == 1"></closedAudit>
        <!--问题闭合审核详情 整改里的问题闭合 --详情-->
        <!-- <closedAuditDetail :problemCloseApprovalVo="i.rectDetailVo.problemCloseVo" v-if="i.rectDetailVo.problemCloseVo"></closedAuditDetail> -->
        <closedAuditOD v-if="
        ($route.query.id && i.rectDetailVo.problemRectApprovalId && i.rectDetailVo.problemRectApprovalId != $route.query.id && i.rectDetailVo.rectStatus == 1)
         || (problemId && i.rectDetailVo.problemRectApprovalId && i.rectDetailVo.problemRectApprovalId != problemId && i.rectDetailVo.rectStatus == 1)" :id="$route.query.id" :problemCloseApprovalVo="i.rectDetailVo"  @refresh="init" :reviewId="i.rectDetailVo.checkRectId"></closedAuditOD>
        <!--问题闭合审核详情 整改里的问题闭合--结果-->
        <closedAudit :problemCloseApprovalVo="i.rectDetailVo.problemCloseApprovalVo" v-if="i.rectDetailVo.rectStatus == 1"></closedAudit>
        <!--延期审批详情-->
        <delaydetail :delayApprovalVo="i.rectDetailVo.delayApplyVo" v-if="i.rectDetailVo.delayApplyVo && !$route.query.id"></delaydetail>
        <delayOD v-if="i.rectDetailVo.delayApplyVo" :delayApprovalVo="i.rectDetailVo.delayApplyVo"></delayOD>
        <delay v-if="i.rectDetailVo.delayApprovalVo" :delayApprovalVo="i.rectDetailVo.delayApprovalVo"></delay>
        <!-- 整改 -->
        <!--问题闭合审核-->
        <closedAuditO v-if="$route.query.id && i.rectDetailVo.problemRectApprovalId == $route.query.id" :id="$route.query.id" :problemCloseApprovalVo="i.rectDetailVo"  @refresh="init" :reviewId="i.rectDetailVo.checkRectId"></closedAuditO>
        <!--延期审批-->
        
        <delayO v-if="($route.query.id && i.rectDetailVo.delayRectApprovalId == $route.query.id)" :id="$route.query.id" :delayApprovalVo="i.rectDetailVo.delayApplyVo" @refresh="init" :checkRectId="i.rectDetailVo.checkRectId"></delayO>
        <!-- 复查 -->
        <!--问题闭合审核-->
        <closedAuditR v-if="$route.query.id && i.reviewDetailVo.problemReviewApprovalId == $route.query.id" :id="$route.query.id" :problemCloseApprovalVo="i.reviewDetailVo"  @refresh="init" :reviewId="i.reviewDetailVo.reviewId"></closedAuditR>
      </div>
    </section>
  </div>
</template>

<script>
  import assign from './../../../../components/approvalProcessDetails/assign'
  import noProblems from './../../../../components/approvalProcessDetails/noProblem'
  import rectification from './../../../../components/approvalProcessDetails/rectification'
  import review from './../../../../components/approvalProcessDetails/review'
  import closedAudit from './../../../../components/approvalProcessDetails/closedAudit'//问题审核闭合详情
  import delay from './../../../../components/approvalProcessDetails/delay'//延期审批详情
  import closedAuditO from './../../../../components/approvalProcessDetails/closedAuditO'//问题审核闭合操作
  import delayO from './../../../../components/approvalProcessDetails/delayO'//延期审批详情操作--审批
  import delayOD from './../../../../components/approvalProcessDetails/delayOD'//延期申请详情
  import delaydetail from './../../../../components/approvalProcessDetails/delaydetail'//延期审批详情操作-审批中看到-无操作
  import closedAuditR from './../../../../components/approvalProcessDetails/closedAuditR'//问题审核闭合操作
   import closedAuditRD from './../../../../components/approvalProcessDetails/closedAuditRD'//问题审核闭合操作
   import closedAuditOD from './../../../../components/approvalProcessDetails/closedAuditOD'//问题审核闭合操作
   import Preview from './../../../../components/preview/ImgPreview'
  export default {
    name: 'mainPage',
    data() {
      return {
        listArray: [],
        num: 20,
        refreshing: false,
        loading: true,
        text: 'List',
        open: false,
        selected: true,
        activeStep: 0,
        obj: {},
        imgPreview:false,

      }
    },
    components: {
      assign,
      noProblems,
      rectification,
      review,
      closedAudit,
      delay,
      closedAuditO,
      delayO,
      delayOD,
      closedAuditR,
      delaydetail,
      closedAuditOD,
      closedAuditRD,
      Preview,
    },

    filters: {
      result(val) {
        if (val == 0) {
          return '无问题'
        } else if (val == 1) {
          return '有问题'
        } else {
          return '---'
        }
      },
    },
    props: {
      problemId: {
        type: String,
        default: ''
      },
      operType: {
        type: String,
        default: ''
      },
    },
    mounted() {
    },
    created() {
      console.log(this.operType)
      this.init()
    },
    methods: {
      handUrl(str){
        if (!str) {
          return []
        } else {
          try {
            if(str.indexOf("[") > -1){
              return JSON.parse(str)
            }else{
              return str.split(',')
            }
          }catch (e) {

          }

        }
      },
      init(){
        if (this.problemId) {
          this.fetch(this.problemId);
        } else {
          console.log(this.$route.query.info)
          if (this.$route.query.info) {
            this.fetch(this.$route.query.info);
          }
        }
      },
      fetch(id) {
        this.loading = true
        let params
        params = {
          problemId: id,
          // problemId: "159828026354303382",
        };
        this.$A.Go('get', '/safety/checkProblem/detail', params).then((success) => {
          this.loading = false
          if (success.code == 200) {
            this.obj = success.body;
            console.log(this.obj);
            if (this.obj.rectAndReviewList != null) {
              this.listArray = this.obj.rectAndReviewList;
              console.log(this.listArray);
            }
          } else {
            this.$A.MS(success.msg)
          }
        }).catch((err) => {
          this.loading = false
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .listTemplate {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;

    .t-header {
      .t-close {
        min-width: 28px;
        border-radius: 50%;
      }
      .t-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.19rem;
        font-weight: 500;
      }
      .t-right-icon {
        font-size: 0.2rem;
      }
    }
    .t-body {
      height: calc(100% - 0.45rem);
      width: 100%;
      overflow: auto;
      background-color: #F8F8F8;
      padding: 0.12rem;
      .noshadow {
        box-shadow: 0px 2px 8px 0px rgba(182, 182, 182, 0.4);
        border-radius: 0.04rem;
        background: rgba(255, 255, 255, 1);
        .noshadow_tit {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          div {
            padding: 0.1rem 0;
          }
          .noshadow_tit_con {
            font-size: 0.15rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 0.21rem;
          }
          .noshadow_tit_name {
            font-size: 0.15rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(61, 61, 61, 1);
            line-height: 0.21rem;
          }
        }

        .box {
          padding: 0.1rem;
          /*border-top: 0.01rem dashed #E0E0E0;*/
          .img-con {
            display: flex;
            width: 100%;
            flex-wrap: nowrap;
            overflow-y: auto;
            padding: 0.05rem 0;
            img {
              padding: 0.05rem;
              width: 25%;
              height: 0.75rem;
            }
          }
          .autograph {
            display: flex;
            flex-direction: column;
            .imgs {
              padding: 0.12rem 0.1rem;
              width: 0.75rem;
              height: 0.75rem;
            }
          }
          .line-list {
            font-size: 0.15rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 0.21rem;
            padding: 0.05rem 0;
            .line-list-con {
              font-size: 0.15rem;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(61, 61, 61, 1);
              line-height: 0.21rem;
            }
          }
        }
      }

    }
  }
</style>
<style lang="scss">
  .mu-expansion-toggle-btn.mu-button svg {
    color: #2994FF;
  }
  .mu-expansion-panel-header {
    padding: 0 0;
  }
  .mu-expansion-panel-content {
    background:rgba(252,252,252,1);
    padding: 0 0;
    border-top: 1px solid #E0E0E0;
  }
</style>
